@use "lib/viewport";

html.composer-open:not(.has-full-page-chat) {
  #main-outlet {
    padding-bottom: var(--composer-height);
    transition: padding-bottom 250ms ease;
  }
}

:root {
  --composer-max-width--hide-preview: 740px;
}

.grippie {
  cursor: row-resize;
  padding: 0.25em 0;
  background: var(--tertiary);
  border-top-left-radius: var(--d-border-radius-large);
  border-top-right-radius: var(--d-border-radius-large);

  @media (pointer: coarse) {
    padding: 0.35em 0;
  }

  &::before {
    content: "";
    display: block;
    width: 1.5em;
    margin: auto;
    border-top: 3px double var(--tertiary-medium);
  }
}

#reply-control {
  position: fixed;
  display: flex;
  flex-direction: column;
  bottom: 0;
  right: 0;
  left: 0;
  margin-inline: auto;
  max-width: $reply-area-max-width;
  width: 100%;
  height: 0;
  min-height: 0;
  z-index: z("composer", "content");
  transition:
    height 0.2s,
    max-width 0.2s,
    padding-bottom 0.2s,
    top 0.2s,
    transform 0.2s,
    min-height 0.2s;
  background-color: var(--secondary);
  box-shadow: var(--shadow-composer);
  border-top-left-radius: var(--d-border-radius-large);
  border-top-right-radius: var(--d-border-radius-large);

  @media screen and (width <= 1200px) {
    min-width: 0;
  }

  &.hide-preview {
    max-width: var(--composer-max-width--hide-preview);
  }

  .reply-area {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0.5em;

    @include viewport.until(sm) {
      padding-bottom: max(env(safe-area-inset-bottom), 6px);
      flex-grow: 1;
      min-height: 0;
    }

    @include viewport.from(sm) {
      margin: 0 auto;
      height: calc(100% - 11px);
      width: 100%;
    }
  }

  .with-form-template {
    overflow: auto;
    flex: 1;

    #mobile-file-upload {
      display: none;
    }
  }

  .saving-text,
  .draft-text {
    display: none;
    padding-left: 8px;

    .spinner {
      margin-left: 8px;
      border-color: var(--secondary);
      border-right-color: transparent;
    }

    .d-icon {
      color: var(--secondary);
    }
  }

  &.open {
    --min-height: 255px;
    box-sizing: border-box;
    height: var(--composer-height);
    min-height: var(--min-height);
    max-height: calc(100vh - var(--header-offset, 4em));
    padding-bottom: var(--composer-ipad-padding);

    @include viewport.until(sm) {
      z-index: z("mobile-composer");
      top: 0;
      transform: none;
      height: 100dvh;
      max-height: unset;
    }
  }

  &.draft,
  &.saving {
    height: 45px !important;
    align-items: center;
    background: var(--tertiary);
    color: var(--secondary);
    flex-direction: row;
    justify-content: space-between;

    .composer-controls {
      display: flex;
      gap: 8px;
      padding-right: 8px;

      .toggle-toolbar {
        display: none;
      }

      .d-icon {
        color: var(--secondary);
      }
    }
  }

  &.draft {
    cursor: pointer;
    display: flex;

    .draft-text {
      display: block;

      @include ellipsis;
    }

    .grippie,
    .saving-text {
      display: none;
    }
  }

  &.saving .saving-text {
    display: flex;
  }

  .reply-to {
    color: var(--primary-high);
    margin-bottom: 0.5em;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    @include viewport.until(sm) {
      justify-content: space-between;
    }

    .reply-details {
      flex: 1;
      display: flex;
      align-items: center;
      min-width: 0;
      white-space: nowrap;

      .d-icon {
        color: var(--primary-medium);
      }

      @include viewport.until(sm) {
        max-width: calc(100% - 75px);
      }
    }

    .composer-action-title {
      display: flex;
      align-items: center;
      width: auto;
      max-width: 100%;
      min-width: 0; // allows shrinking when needed

      .action-title {
        display: flex;
        align-items: center;
        line-height: normal;
        min-width: 0;

        .topic-link,
        .user-link,
        .post-link {
          margin-right: 8px;

          @include ellipsis;
        }
      }

      .username {
        margin-right: 5px;
        max-width: 100px;

        @include ellipsis;

        @media screen and (width <= 500px) {
          display: none;
        }
      }

      .d-icon {
        margin-right: 8px;
      }

      img.avatar {
        margin-right: 3px;
      }
    }

    .composer-controls {
      display: flex;
      gap: 8px;
      margin-left: 8px;
    }

    // Protection for languages with long strings on very small screens. This
    // has no effect on most users but we need it for some cases. If this is
    // not added, "add edit reason" will overlap with the composer controls
    @include viewport.until(sm) {
      .reply-details {
        flex-wrap: wrap;
      }

      .display-edit-reason {
        margin-top: 0.5em;
      }

      .composer-controls {
        align-self: flex-start;
        gap: 6px;
      }
    }
  }

  .whisper,
  .display-edit-reason {
    font-style: italic;
  }

  .whisper {
    margin: 0 0.25em;
  }

  .unlist {
    margin-left: 0.25em;
  }

  .display-edit-reason {
    display: inline-flex;

    a {
      display: inline-flex;
    }

    .d-icon {
      padding: 0.3em 0.5em;
      color: var(--tertiary);
    }
  }

  #edit-reason {
    margin: 0 4px;
  }

  .user-selector,
  .title-and-category {
    display: flex;
    width: 100%;
    align-items: center;
    position: relative;
    gap: 0 0.5em;
  }

  .user-selector {
    @include viewport.until(sm) {
      flex-wrap: wrap;
    }

    @include viewport.from(sm) {
      margin-bottom: 0.5em;
    }
  }

  .title-input {
    position: relative;
    display: flex;
    flex: 1 1 50%;

    input {
      flex-grow: 1;
    }
  }

  .with-tags {
    .title-input {
      flex: 1 1 100%;
    }

    @include viewport.until(sm) {
      .mini-tag-chooser,
      .category-chooser {
        z-index: z("base");
      }
    }

    .archetype-private_message & {
      // PMs don't have categories, so we need a wider tag input
      .mini-tag-chooser {
        width: 100%;
        max-width: 100%;
      }
    }
  }

  .category-input {
    position: relative;
    display: flex;
    flex: 1 0 40%;
    max-width: 40%;
    margin: 0 0 8px 8px;

    .category-chooser {
      display: flex;
      flex: 1 0 auto;
      max-width: 100%;
      width: auto;

      &.has-selection {
        .name {
          font-size: var(--font-up-1);
        }
      }

      .select-kit-header {
        color: var(--primary-high);
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .select-kit-body {
        max-width: 450px;
      }

      .selected-name {
        max-width: 100%;
        overflow: hidden;

        .name {
          display: flex;
          max-width: 100%;
          gap: 0 0.5em;

          .badge-category {
            overflow: hidden;
          }

          // This prevents the first category from being too-truncated at the expense of a long subcategory
          > span:last-of-type:not(:first-of-type) {
            flex-shrink: 10;
          }
        }
      }
    }
  }

  .with-tags.with-category {
    .title-and-category {
      flex-wrap: wrap;
    }

    .category-input {
      margin-left: 0;
      margin-bottom: 8px;
      min-width: 0; // allows flex to shrink
      flex-wrap: wrap;
      max-width: calc(50% - 4px);
    }
  }

  .add-warning {
    color: var(--primary-high);
    padding: 0.5em;
    display: flex;
    line-height: var(--line-height-medium);
    margin: 0;

    @include viewport.until(sm) {
      margin-bottom: 0.15em;
    }

    input {
      margin-right: 8px;
    }
  }

  @include viewport.until(sm) {
    .users-input,
    .add-warning {
      width: 100%;
    }

    .users-input .select-kit.multi-select {
      width: 100%;
    }
  }

  #reply-title {
    margin-bottom: 0.5em;
    flex-basis: 50%;
    width: unset;

    &:focus {
      box-shadow: none;
    }
  }

  .category-input + .tags-input {
    width: auto;
    max-width: calc(50% - 0.25em);
  }

  .tags-input {
    position: relative;
    margin: 0 0 0.5em 0;
    flex-grow: 1;

    @include viewport.until(sm) {
      width: 100%;
      max-width: 50%;
    }

    .mini-tag-chooser {
      z-index: z("composer", "dropdown");
      width: 100%;

      .select-kit-header {
        color: var(--primary-high);
      }
    }
  }

  .wmd-controls {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;

    .mobile-view & {
      &:not(.toolbar-visible) {
        .d-editor-button-bar {
          display: none;
        }
      }
    }
  }

  .submit-panel {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    margin-top: 0.5em;

    @include viewport.until(sm) {
      flex-wrap: wrap;
      gap: 0.25em 0;

      .create {
        max-width: 50vw;

        span {
          @include ellipsis;
        }
      }
    }

    .mobile-file-upload {
      &.hidden + .mobile-preview {
        // Hide preview button while file is uploading to make room for upload progress
        display: none;
      }
    }

    .mobile-preview {
      margin-left: 0.25em;
    }
  }

  .save-or-cancel {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
    margin-right: 1em;

    @include viewport.until(sm) {
      margin-right: 0.5em;
      flex: 1 1 auto;
    }

    .btn-primary {
      flex: 0 0 auto;
    }

    .cancel {
      align-items: center;
      display: flex;
      margin-left: 1em;
      line-height: normal;
      color: var(--primary-high);
      transition: color 250ms;
      padding: 0;

      &:hover,
      &:focus {
        outline: none;
        color: var(--danger);
      }

      &:active {
        background-color: transparent;
        background-image: none;
      }

      @include viewport.until(sm) {
        .d-icon {
          font-size: var(--font-up-2);
          color: var(--primary-medium);
          padding: 0.35em;
        }
      }
    }

    .preview-template {
      margin-left: 0.5rem;
    }
  }

  #draft-status,
  #file-uploading {
    color: var(--primary-high);
    margin-right: 0.5em;

    @include viewport.until(sm) {
      margin-left: 0.5em;
    }

    @include viewport.from(sm) {
      text-align: right;
    }
  }

  #file-uploading {
    display: flex;
    align-items: center;
    margin-right: auto;

    a {
      margin-left: 0.33em;
      color: var(--primary-high);
    }

    .spinner {
      margin-right: 0.33em;
    }
  }

  #draft-status {
    margin-left: auto;

    .d-icon-user-pen {
      color: var(--danger);
      font-size: 20px;
      vertical-align: -5.5px;
    }

    + .btn-mini-toggle {
      margin-left: 0;
    }
  }

  .composer-select-form-template {
    margin-bottom: 8px;
    width: 100%;

    .name,
    .formatted-selection,
    .d-icon {
      color: var(--primary-high);
    }
  }

  .select-kit.is-expanded {
    z-index: z("composer", "dropdown") + 1;

    &.user-chooser {
      // keeps user chooser a layer above AI autocomplete
      z-index: z("composer", "dropdown") + 2;
    }
  }

  @include viewport.from(sm) {
    &.private-message {
      .with-tags {
        .title-and-category {
          flex-wrap: nowrap;
          gap: 0.5em;

          .tags-input {
            max-width: 50%;
            flex: 1 1 auto;
          }
        }

        .title-input {
          max-width: 50%;
          min-width: 0;

          input {
            min-width: 0;
          }
        }
      }

      #private-message-users,
      .users-input {
        width: 100%;
        flex: 0 0 auto;

        &.can-warn {
          // space for warning, inverse of mini-tag-chooser width
          width: 60%;
        }
      }

      .add-warning {
        flex: 1 1 auto;
        overflow: hidden;

        span {
          // protects the space of the user input in case there's a very long translation
          @include ellipsis;
        }
      }
    }
  }

  &.closed {
    .grippie {
      display: none;
    }
  }
}

.md-table {
  overflow-y: auto;
  margin: 1em 0;

  .mobile-view & {
    table {
      width: 100%;
    }
  }
}

.toggle-preview {
  margin-left: auto;
  transition: all 0.33s ease-out;

  &.active {
    transform: rotate(180deg);
  }

  .d-icon {
    color: var(--primary-medium);
  }
}

.draft-error {
  color: var(--danger);
}

@keyframes blink_input_opacity_to_prevent_scrolling_when_focus {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

// Limiting to hover: none ensures we don't target touch-enabled desktops here
@media (hover: none) {
  // This targets mobile/iPad/tablets and it goes together with
  // the interactive-widget=resizes-content in the viewport meta tag
  // for maximum browser compatibility (including Firefox on Android)
  // see https://developer.chrome.com/blog/viewport-resize-behavior for context
  .discourse-touch,
  .mobile-device {
    #reply-control {
      // this might be overkill
      // but on iPad with a physical keyboard the composer is shifted up on scroll
      // this adds a solid box shadow below, looks cleaner
      box-shadow: 0 150px 0 0 var(--secondary);

      &.open {
        z-index: z("mobile-composer");
      }

      &.draft,
      &.saving {
        padding-bottom: env(safe-area-inset-bottom);
      }

      .toggle-fullscreen {
        display: none;
      }

      .submit-panel,
      .composer-fields {
        // this prevents touch events (i.e. accidental scrolls) from bubbling up
        touch-action: none;
      }
    }

    &.keyboard-visible #reply-control.open {
      height: calc(var(--composer-vh, 1vh) * 100);

      .grippie {
        display: none;
      }

      .reply-area {
        padding-bottom: 0.375em;
      }
    }

    &.composer-open .with-topic-progress {
      bottom: calc(var(--composer-height));
    }
  }
}

.mobile-device {
  #reply-control {
    .grippie {
      display: none;
    }

    &.show-preview {
      .submit-panel {
        padding-top: 0.5em;
        z-index: z("fullscreen") + 1;
        background-color: var(--secondary);

        .cancel,
        .mobile-file-upload,
        .mobile-preview {
          display: none;
        }
      }

      .d-editor-preview-wrapper {
        position: absolute;
        z-index: z("fullscreen");
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--secondary);
        border-bottom: 40px solid var(--secondary);
        max-width: 100%;
        margin: 0;
        padding: 0.5em;
        overflow: auto;

        .d-editor-preview {
          margin-bottom: 40px;
        }
      }

      .composer-controls {
        display: none;
      }
    }
  }
}

// Safari in iOS/iPad does not handle well a bottom:0 fixed-positioned element,
// especially while the software keyboard is visible, so we top-anchor it here
// and shift it using transform
.ios-device {
  #reply-control {
    // the two properties below are equivalent to bottom: 0
    top: calc(var(--composer-vh, 1vh) * 100);
    transform: translateY(-100%);
    bottom: unset;
  }

  &.footer-nav-visible {
    #reply-control.draft,
    #reply-control.saving {
      margin-top: calc(
        (var(--footer-nav-height) + env(safe-area-inset-bottom)) * -1
      );
      padding-bottom: 0;
    }
  }

  // When an element (input, textearea) gets focus, iOS Safari tries to put it in the center
  // by scrolling and zooming. We handle zooming with a meta tag. We used to handle scrolling
  // using a complicated JS hack.
  //
  // However, iOS Safari doesn't scroll when the input has opacity of 0 or is clipped.
  // We use this quirk and temporarily hide the element on focus
  //
  // Source https://gist.github.com/kiding/72721a0553fa93198ae2bb6eefaa3299
  input:focus,
  textarea:focus,
  [contenteditable="true"]:focus-within {
    animation: blink_input_opacity_to_prevent_scrolling_when_focus 0.01s;
  }
}

.composer-popup {
  box-sizing: border-box;
  position: absolute;
  width: calc(60%);
  max-height: 50%;
  bottom: 4.2rem;
  right: 1rem;
  overflow-y: auto;
  z-index: z("composer", "dropdown") + 1;
  padding: 1.5em 1.5rem 0.75em 1.5rem;
  box-shadow: var(--shadow-dropdown);
  border-radius: var(--d-border-radius-large);
  background: var(--secondary);

  .show-preview & {
    right: 1.5rem;
    bottom: 4.2rem;
    width: calc(50% - 2rem);
  }

  .blurb {
    display: none;
  }

  > p,
  h3 {
    &:first-of-type {
      margin-top: 0;
      margin-right: 3em;
    }
  }

  &.urgent {
    background: var(--danger-low);
  }

  &.education-message {
    background-color: var(--tertiary-low);
  }

  &.dominating-topic-message,
  &.get-a-room {
    bottom: unset;
    padding: 2.25em 6em 2.5em 2.25em;

    p {
      font-size: var(--font-up-1);
    }

    button:not(.close) {
      margin-top: 0.5em;
    }
  }

  h3 {
    margin-bottom: 10px;
  }

  .btn.close {
    flex-direction: row-reverse;
    align-items: center;
    position: absolute;
    right: 0.5rem;
    top: 0;
    color: var(--primary-medium);
    font-size: var(--font-0);

    .d-icon {
      color: currentcolor;
      font-size: var(--font-up-1);
      margin: 0 0 0 0.25em;
    }

    .discourse-no-touch & {
      &:active,
      &:focus {
        background: transparent;

        .d-icon {
          color: var(--primary);
        }
      }
    }
  }

  ul {
    margin: 0;
    padding: 0 0 0 1.5em;

    &.list,
    &.topics {
      list-style: none;
      padding: 0;
    }

    li {
      font-weight: normal;
      margin-top: 8px;
    }
  }

  &:nth-of-type(2) {
    width: calc(50% - 65px);
  }

  .discourse-tags {
    font-size: var(--font-down-1);
  }
}

.custom-body {
  background-color: var(--tertiary-low);

  p {
    max-width: 98%;
  }
}

.similar-topics {
  .similar-topic {
    margin-bottom: 0.5em;
  }

  span.badge-wrapper {
    margin-left: 0;
  }

  .topic-title {
    margin-bottom: 0.5em;
    flex: 0 1 auto;
    margin-right: 0.5em;

    .d-icon {
      color: var(--primary-high);
    }

    span.topic {
      display: flex;
      flex-direction: column;

      .first-line {
        flex: 1;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .second-line {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.5em;

        .discourse-tags {
          font-size: var(--font-down-1);
        }
      }
    }
  }
}

.fullscreen-composer {
  overflow: hidden;

  .profiler-results {
    display: none;
  }

  #reply-control {
    &.fullscreen {
      // important needed because of inline styles when height is changed manually with grippie
      height: 100vh !important;
      max-height: 100%; // prevents devices from miscalculating using vh
      z-index: z("header") + 1;

      @supports (--custom: property) {
        height: calc(var(--composer-vh, 1vh) * 100) !important;
      }

      .grippie {
        display: none;
      }

      .d-editor-preview-wrapper {
        margin-top: 1%;
      }

      .reply-to {
        border-bottom: 1px solid var(--content-border-color);
        margin-bottom: 0;
        padding-bottom: 8px;
      }

      .d-editor-textarea-wrapper {
        border: none;
      }

      &.show-preview .d-editor-textarea-wrapper {
        border-right: 1px solid var(--content-border-color);
      }

      #draft-status,
      #file-uploading {
        margin-left: 0;
        text-align: initial;
      }

      &::before {
        content: "";
        background: var(--secondary);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: -1;
        left: 0;
      }
    }
  }
}

.composer-fullscreen-prompt {
  animation: fadeIn 1s ease-in-out;
  animation-delay: 1.5s;
  animation-direction: reverse;
  animation-fill-mode: forwards;
  position: fixed;
  left: 50%;
  top: 10%;
  transform: translate(-50%, 0);
  z-index: z("header") + 1;
  background: var(--primary-very-high);
  color: var(--secondary);
  padding: 0.5em 0.75em;
  pointer-events: none;
  border-radius: 2px;

  @media (prefers-reduced-motion) {
    animation-duration: 0s;
  }

  .rtl & {
    // R2 is not smart enough to support this swap
    transform: translate(50%, 0);
  }

  kbd {
    background: none;
  }
}

// align the previewless composer with the topic content
#reply-control:not(.fullscreen).hide-preview {
  --composer-internal-padding: 1em;
  --layout-gap: 2em;
  --topic-width: calc(
    var(--topic-body-width) + (var(--topic-body-width-padding) * 2)
  );
  width: 100%;
  max-width: calc(var(--topic-width) + var(--topic-avatar-width));
}

body:not(.has-sidebar-page) {
  #reply-control:not(.fullscreen).hide-preview {
    margin-left: 0.67em;

    // 1100px is equivalent to --d-max-width
    @media screen and (width >= 1110px) {
      margin-left: calc(((100% - var(--d-max-width)) / 2) + 0.67em);
    }

    // 790px is equivalent to --topic-width
    @media screen and (width < 790px) {
      max-width: calc(100% - calc(0.67em * 2));
      margin-left: 0.67em;
    }

    @include viewport.until(sm) {
      max-width: unset;
      margin-inline: unset;
    }
  }
}

body.has-sidebar-page {
  #reply-control:not(.fullscreen).hide-preview {
    margin-left: calc(var(--d-sidebar-width) + var(--layout-gap));

    // 1390px is equivalent to --d-max-width + --d-sidebar-width
    @media screen and (width >= 1390px) {
      left: calc(
        (100% - var(--d-max-width) + var(--d-sidebar-width)) / 2
      ); // 50% of the whitespace
      margin-left: var(--layout-gap);
    }

    // This is when the topic width starts to shrink
    @media screen and (width <= 1180px) {
      width: calc(100% - var(--d-sidebar-width) - var(--layout-gap) - 0.67em);
    }

    // sidebar shrinks
    @media screen and (width <= 1000px) {
      --layout-gap: 1em;
      margin-left: calc(var(--d-sidebar-width) + var(--layout-gap));
    }
  }
}
